<template>
  <div class="app-container">


    <!-- vxe检索数据组件 -->
    <search-form
        ref="searchForm"
        :formSearchData.sync="formSearchData"
        :acsTypeOptions="acsTypeOptions"
        @resetSearchEventEmit="resetSearchEventEmit"
        @searchEventEmit="searchEventEmit"
    >
    </search-form>


    <!-- 表格组件 -->
    <ex-base-table
        ref="exBaseTable"
        :loading.sync="loading"
        :tableColumn="tableColumn"
        :tableData="tableData"
        :isVxeColSeq="false"
        :isVxeToolbar="true"
        :isUpdateButton="false"
        :isDelButton="false"
        :isVxeCheckbox="false"
        :isVxeHandleS="true"
        :isHandleCreate="false"
        :SortingSlot="true"
    >


      <!-- 操作栏按钮扩展插槽 -->
      <template v-slot:handleExtend="{row}">
        &nbsp;
        <el-button v-if="true" size="mini" type="text" @click="viewSonTable(row)">
          队列信息
        </el-button>
      </template>
      <template v-slot:sorting="{row}">
        &nbsp;
        <i class="el-icon-upload2 icon" @click="PlacedTop(row)"></i>
        &nbsp;
        <i class="el-icon-top icon" @click="sortingTop(row)"></i>
        &nbsp;
        <i class="el-icon-bottom icon" @click="sortingNext(row)"></i>
        &nbsp;
        <i class="el-icon-download icon" @click="atTheBottom(row)"></i>
      </template>
    </ex-base-table>

    <!-- 分页组件 -->
    <Pagination
        v-show="tablePage.totalResult>0"
        :limit.sync="tablePage.pageSize"
        :page.sync="tablePage.currentPage"
        :total="tablePage.totalResult"
        @pagination="pageFindList"
    />
    <el-dialog
        width="80%"
        :visible.sync="DialogSonTableVisible"
    >
      <ParamValMaintainTable
          ref="paramValMaintainTable"
          :currentRow="currentRow"
      />
    </el-dialog>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import XEUtils from 'xe-utils'

import {
  findTaskQueue,
  softjiayi,
  softjianyi,
  softfirst,
  softend

} from './service/baseApi'

// 基础表格组件
import ExBaseTable from '@/components/VxeTable/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'

// 检索表单
import SearchForm from './components/SearchForm'
//信息提示框

import ParamValMaintainTable from './components/ParamValMaintainTable'

import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'
import lpoptions from '@/views/mixins/lpoptions'

export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData, lpoptions],
  components: {
    ExBaseTable,
    Pagination,
    SearchForm,
    ParamValMaintainTable
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {
        task_code: '',
        task_name: '',
      },
      // 排除条件
      sortField: '',
      sortFlag: '',
      // 状态选项
      acsTypeOptions: [],

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: "",
        acs_code: "",
        acs_name: "",
        acs_type: "",
        ip: "",
        port: "",
        user_code: "",
        pass: "",
        inst_name: "",
        db_type: "",
        lp_code: "123456",
        status: "1",
        remark: "",

      },
      initFormSubmitData: {
        id: "",
        acs_code: "",
        acs_name: "",
        acs_type: "",
        ip: "",
        port: "",
        user_code: "",
        pass: "",
        inst_name: "",
        db_type: "",
        lp_code: "123456",
        status: "1",
        remark: "",
      },
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据

      DialogSonTableVisible: false,
      currentRow: {},
      aaaaa: false,
    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 查询数据
    findList() {
      this.loading = true
      // 请求表格数据
      findTaskQueue({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        sortField: this.sortField,
        sortFlag: this.sortFlag,
        ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    /* 分页组件相关 */
    // 分页事件（页码切换，每页页数切换）
    pageFindList() {
      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        {field: 'task_code', title: '任务方案编号', width: 200},
        {field: 'task_name', title: '任务方案名称', width: 200},
        {field: 'operation_typename', title: '操作类型', width: 200},
        {field: 'task_user_name', title: '任务操作人', width: 200},
        {field: 'task_statusname', title: '任务状态', width: 200},
        {field: 'task_sort', title: '任务排序', width: 200},
      ]
      this.tableColumn = tabCols;
      this.aaaaa = true
    },

    /* 子表格弹出 */
    viewSonTable(row) {

      this.currentRow = Object.assign({}, row) // copy obj
      this.DialogSonTableVisible = true
    },


    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      this.tablePage.currentPage = 1
      this.findList()
    },
    // 置顶
    PlacedTop(row) {
      softfirst({id: row.id}).then(({data}) => {
        console.log(data)
        this.findList()
      })
    },
    // 上一位
    sortingTop(row) {
      softjianyi({id: row.id}).then(({data}) => {
        console.log(data)
        this.findList()
      })
    },
    // 下一位
    sortingNext(row) {
      softjiayi({id: row.id}).then(({data}) => {
        console.log(data)
        this.findList()
      })
    },
    // 最底下
    atTheBottom(row) {
      softend({id: row.id}).then(({data}) => {
        console.log(data)
        this.findList()
      })
    },

  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}

.icon {
  font-size: 20px;
}
</style>
